<template>
	<view class="container">
		<image class="bg" src="../../static/车联网服务商家端-00登录_slices/组 6.png" mode=""></image>
		<image class="car" src="../../static/车联网服务商家端-00登录_slices/组 6@2x(1).png" mode="widthFix"></image>
		<view class="main">
			<form>
				<view class="line">
					<input type="text" v-model="form.name" placeholder="用户名" />
				</view>
				<view class="line">
					<input type="text" v-model="form.phone" placeholder="用户手机号" />
				</view>
				<view class="yanzheng">
					<view class="yanzheng1"><input type="text" placeholder="请输入验证码" v-model="form.code" />
						<span>|
							<view class="endSpan">
								<u-code unique-key="page-c" ref="uCode2" @change="codeChange2" keep-running
									start-text="获取验证码">
								</u-code>
								<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{tips2}}</text>
							</view>

						</span>
					</view>
				</view>
				<view class="register" @click="toRegister">立即注册></view>
				<view class="button">
					<button type="primary" @click="toLogin">登录</button>
				</view>
			</form>
		</view>
		<view class="title">
			<view class="title1">
				您好，
			</view>
			<view class="title2">
				欢迎来到车联网服务平台商家端
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips2: '',
				form: {
					phone: "",
					name: "",
					code: "",
					uuid: "",
					src: ""
				},
			};
		},
		methods: {
			codeChange2(text) {
				this.tips2 = text;

			},
			getCode2() {
				if (this.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					uni.request({
						url: "http://localhost:8080/shop/sendcode",
						data: {
							phone: this.form.phone
						},
						method: "post",
						success: (res) => {

						}
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode2.start();
					}, 200);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 登录
			toLogin() {
				let that = this;
				uni.request({
					url: "http://localhost:8080/shop/login",
					data: {
						name: this.form.name,
						phone: this.form.phone,
						code: this.form.code
					},
					method: "post",
					success: (res) => {
						console.log(res)
						that.$global.shopId = res.data.data.id
						that.$global.token = res.data.data.token
						console.log(this.$global.shopId)
						console.log(this.$global.token)
						// 检查this.$global.shopId和this.$global.token是否都不为空  
						if (this.$global.shopId && this.$global.token) {
							// 使用uni.navigateTo或uni.redirectTo等方法跳转到下一个页面  
							// 假设你要跳转的页面路径是'/pages/nextPage/nextPage'  
							uni.navigateTo({
								url: '/pages/home/home'
							});
						} else {
							// 如果shopId或token为空，则进行相应处理，比如显示提示信息  
							uni.showToast({
								title: 'shopId或token为空，无法跳转',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败：', err);
					},
				})

			},
			toRegister() {
				uni.navigateTo({
					url: "/pages/regist/regist"
				})
			},
			changeImage(){
				
			}
		},
		
		onShow() {
		
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
	}

	.car {
		width: 280rpx;
		position: relative;
		top: -200rpx;
		left: 440rpx;
		z-index: 2;
	}

	.main {
		background-color: #fff;
		height: 1000rpx;
		position: relative;
		top: -300rpx;
		border-radius: 50rpx;
		z-index: 1;
		padding: 100rpx;
	}

	.title {
		height: 100rpx;
		// background-color: #fff;
		position: absolute;
		top: 100rpx;
		left: 100rpx;
		color: white;
		font-weight: 700;

		.title1 {
			font-size: 48rpx;
			height: 80rpx;
		}

		.title2 {
			font-size: 40rpx;

		}
	}

	.line {
		border-bottom: 1px solid gray;
		height: 80rpx;
		width: 100%;
		margin: 10rpx auto;

		input {
			height: 80rpx;
			line-height: 80rpx;
		}

		image {
			width: 130rpx;
			height: 70rpx;
			position: relative;
			top: -70rpx;
			left: 425rpx;
		}

	}

	.yanzheng {
		border-bottom: 1px solid gray;
		height: 80rpx;
		width: 100%;

		.yanzheng1 {
			display: flex;
			justify-content: space-between;
			height: 80rpx;

			span {
				width: 180rpx;
				font-size: 24rpx;
				color: #f0f0f0;
				line-height: 80rpx;
				text-align: center;
			}

			input {
				margin-top: 10px;
				width: 70%;
				border: none;
			}

			.endSpan {
				display: inline-block;
				color: #4886f0;
				margin-left: 10rpx;
			}
		}
	}

	.register {
		margin: 40rpx 0;
		color: #007AFF;
	}
</style>